<template>
  <a-breadcrumb style="font-size: 18px; font-weight: bold; margin-bottom: 20px">
    <a-breadcrumb-item>库存管理</a-breadcrumb-item>
    <a-breadcrumb-item @click="$emit('back')"
      ><a>商品库存,配额管理</a></a-breadcrumb-item
    >
    <a-breadcrumb-item>商品详情</a-breadcrumb-item>
  </a-breadcrumb>
  <a-table
    :columns="columns"
    :data-source="page.list"
    :pagination="pagination"
    @change="handleTableChange"
    bordered
  >
    <template #Discount="{ text }">
      {{ DisMap[text] }}
    </template>
    <template #Remark="{ text }">
      {{ shijian(text) }}
      <label v-show="visible11">{{ text }}天</label>
      <label v-show="visible12">已过期</label>
    </template>
    <template #opr="{ record }">
      {{ select(record) }}
      <a-button v-show="visible01" @click="openMan(record)" style="primary"
        >配额</a-button
      >
      <a-button v-show="visible02" @click="exec(record.g_id)" style="primary"
        >确认过期处理</a-button
      >
      <label v-show="visible03">已进行过期处理</label>
    </template>
  </a-table>

  <goods-manage ref="ManRef" @flash="getPage(page.current)"></goods-manage>
  <goods-exec ref="ExecRef" @flash="getPage(page.current)"></goods-exec>
</template>


<script>
import { ref, reactive } from "vue";
import { get, put, post, tip, del } from "@/common";
import GoodsManage from "./GoodsManage.vue";
import GoodsExec from "./GoodsExec.vue";

export default {
  components: { GoodsManage, GoodsExec },
  props: ["record"],
  setup(props, { emit }) {
    const ManRef = ref();
    const openMan = (record) => {
      ManRef.value.openMan(record);
    };
    const ExecRef = ref();
    const exec = (id) => {
      ExecRef.value.exec(id);
    };

    const shijian = (text) => {
      if (text > 0) {
        (visible11.value = true), (visible12.value = false);
      } else {
        (visible11.value = false), (visible12.value = true);
      }
    };
    const select = (record) => {
      if (record.g_remark > 0) {
        (visible01.value = true),
          (visible02.value = false),
          (visible03.value = false);
      } else if (record.g_exec == false) {
        (visible01.value = false),
          (visible02.value = true),
          (visible03.value = false);
      } else {
        (visible01.value = false),
          (visible02.value = false),
          (visible03.value = true);
      }
    };
    const visible01 = ref(true);
    const visible02 = ref(true);
    const visible03 = ref(true);
    const visible11 = ref(true);
    const visible12 = ref(true);
    const DisMap = {
      0: "赠送品",
      1: "一折",
      2: "二折",
      3: "三折",
      4: "四折",
      5: "五折",
      6: "六折",
      7: "七折",
      8: "八折",
      9: "九折",
      10: "原价",
    };
    const columns = [
      {
        dataIndex: "g_id",
        title: "库存编号",
        align: "center",
      },
      {
        dataIndex: "g_name", //服务端数据属性名
        title: "商品名称",
        align: "center",
      },
      {
        dataIndex: "g_discount",
        title: "折扣",
        align: "center",
        slots: {
          customRender: "Discount",
        },
      },
      {
        dataIndex: "g_imtime",
        title: "进货时间",
        align: "center",
      },
      {
        dataIndex: "g_num",
        title: "库存量",
        align: "center",
      },
      {
        dataIndex: "g_branch",
        title: "所在分店",
        align: "center",
      },
      {
        dataIndex: "g_remark",
        title: "距离过期时间",
        align: "center",
        slots: {
          customRender: "Remark",
        },
      },
      {
        dataIndex: "opr",
        title: "操作",
        align: "center",
        slots: {
          customRender: "opr",
        },
      },
    ];
    //分页处理-start
    const query = reactive({
      g_ca_id: "",
    }); //定义查询参数

    const page = ref({}); //接收服务端返回的分页对象

    //分页引擎
    const pagination = reactive({
      current: 1, //当前页
      pageSize: 2, //每页记录数
      total: 0, //总记录数
      pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"], //每页记录下拉框的选型
      showSizeChanger: true, //是否展示每页记录数下拉框
      showQuickJumper: true, //是否展示快速跳转
      showTotal: (total, range) => {
        //展示总页数等文字说明信息的
        return (
          "共" +
          total +
          "条记录,当前第" +
          pagination.current +
          "页" +
          (range[1] - range[0] + 1) +
          "条记录"
        );
      },
    });

    //获取当前分页
    const getPage = (pageNum = 1) => {
      query.pageNum = pageNum;
      query.pageSize = pagination.pageSize;

      get("/stock/manage/details", query).then((res) => {
        page.value = res.data; //将服务端传来的分页数据赋值予page

        //更新分页引擎
        pagination.current = page.value.current;
        pagination.pageSize = page.value.pageSize;
        pagination.total = page.value.total;
      });
    };
    getPage(1); //页面加载是，首先加载第一页

    //当分页发送变化时（如：页码、每页记录数变化时）
    const handleTableChange = (
      pagi,
      filters,
      sorter,
      { currentDataSource }
    ) => {
      pagination.current = pagi.current;
      pagination.pageSize = pagi.pageSize;
      pagination.total = pagi.total;

      getPage(pagination.current);
    };

    //分页处理-end

    return {
      columns,
      query,
      page,
      pagination,
      getPage,
      handleTableChange,
      DisMap,
      visible01,
      visible02,
      visible03,
      visible11,
      visible12,
      select,
      shijian,
      ManRef,
      openMan,
      ExecRef,
      exec,
    };
  },
};
</script>
